<template>
	<!--部门管理-->
	<div class="dptmanage">
		<Tabs :value="unit">
			<TabPane label="部门管理" name="1">
				<div class="dptgroup">
					<div v-for="item in items" v-bind:key="item.id" class="itemstyle">
						<span class="dptname">{{ item.dptname }}</span>
						<Icon type="ios-trash-outline" class="dptdelete"/>
					</div>
					<div class="adddpt"><span class="add">+</span></div>
				</div>
			</TabPane>
			<TabPane label="人员管理" name="2">

			</TabPane>
		</Tabs>
	</div>
</template>

<script>
	export default {
		name: "dptmanage",
		data() {
			return {
				unit:'1',
				items:[]
			}
		},
		mounted() {
			//获取部门列表
			this.items.push({"dptname":"城管局","id":"23io4ng4gnio43gi"})
			this.items.push({"dptname":"公安局","id":"23i4444io43gi"})
			this.items.push({"dptname":"城市规划局城市规划局","id":"23i55555nio43gi"})
			this.items.push({"dptname":"城管局","id":"23io8888o43gi"})
			this.items.push({"dptname":"城管局","id":"23io499999o43gi"})
		},
		computed: {},
		watch: {},
		components: {},
		methods: {},
		props: []
	}
</script>

<style scoped lang="less">
.dptgroup{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.itemstyle{
		display: flex;
		flex-direction: column;
		flex-basis: 0;
		align-items: center;
		justify-items: center;
		width: auto;
		height: 6vw;
		min-width: 8vw;
		box-sizing: border-box;
		margin: 1rem;
		padding: .1rem 0.3rem;
		background: -webkit-linear-gradient(left, #6c79b3,#353c66); /* Safari 5.1 - 6.0 */
		background: linear-gradient(to right,#6c79b3,#353c66); /* 标准的语法（必须放在最后） */
		border-radius: 5px;
		.dptname{
			justify-self: center;
			color:rgba(150,195,255,1);
			font-size:0.8rem;
			font-family:PingFangSC-Medium;
			font-weight:500;
			flex-grow: 1;
			text-align: center;
		}
		.dptdelete{
			width: 1.5vw;
			height: 1.5vw;
			color: white;
			font-size: 1.2rem;
			align-self: flex-end;
		}
	}
	.adddpt{
		width: 8vw;
		height: 6vw;
		border: 1px dashed #ffffff;
		background: transparent; /* Safari 5.1 - 6.0 */
		border-radius: 5px;
		box-sizing: border-box;
		margin: 1rem;
		display: flex;
		align-items: center;
		justify-items: center;
		flex-grow: 1;
		.add{
			color: white;
			font-size: 1rem;

		}
	}
}
</style>